<!--
 * @Descripttion: 我的机型
 * @version: 
 * @Author:Hui
 * @Date: 2023-10-07 15:05:24
 * @LastEditTime: 2023-11-26 21:23:22
 * @LastEditors: sueRimn
-->

<template>
  <view class="phone-box">
    <view class="phone-warp d-flex">
      <view class="tip">{{productInfo.fromText}}</view>
      <view class="d-flex"  @click="goPage('product', { id: productInfo.productId })">
        <view class="image d-flex align-items-center justify-content-center">
          <common-image
            :src="productInfo.productImage ? productInfo.productImage + '?x-oss-process=image/resize,m_fill,w_80' : ''"
            :styles="'width: 80rpx; height: 80rpx; display: block;'" />
        </view>
        <view class="info d-flex flex-column">
          <view class="name">{{ productInfo.productName }}</view>
          <view class="price d-flex align-items-end">
            <text class="yuan">￥</text>
            <text>{{ productInfo.evaluatePrice }}</text>
            <text class="desc">最高可卖</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>


<script>
export default {
  props: {
    productInfo: { type: Object, default: {} }
  },
  //点击产品
  methods: {
    handlePhoneClick(productId) {
      uni.navigateTo({
        url: `/pages/product/info?productId=${productId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.phone-box {
  padding: 24rpx;
  margin: 24rpx 24rpx 0rpx 24rpx;
  background-color: #fff;
  border-radius: 24rpx;

}

.phone-warp {
  background: #FAFAFA;
  border-radius: 20rpx;
  padding: 15rpx 20rpx;
  border-radius: 20rpx;
  margin: 0 0 10rpx 0;
  position: relative;
  .tip{
      position: absolute;
      left: 0;
      top: 0;
      background-color: var(--hui-color-primary);
      color: #fff;
      z-index: 1;
      font-size: var(--hui-font-size-22);
      border-radius: 16rpx 8rpx 8rpx 8rpx;
      width: 60rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
    }
  .image {
    background: #fff;
    border-radius: 16rpx;
    width: 100rpx;
    height: 100rpx;
    position: relative;
    
  }
  .info {
    padding: 0 0 0 18rpx;

    .name {
      line-height: 36rpx;
      margin: 10rpx 0 0 0;
      font-size: var(--hui-font-size-26);
      width: 300rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .price {
        font-size: var(--hui-font-size-28);
        color: #1F1F1F;
        line-height: 1;
        padding:12rpx 0 0 0;
        color: var(--hui-color-danger);
      }

      .yuan {
        font-size: var(--hui-font-size-24);
        color: var(--hui-color-danger);
      }

    .desc {
      font-size: var(--hui-font-size-26);
      color: var(--hui-color-title);
      margin: 0 0 0rpx 10rpx;
    }
  }
}
</style>